<template>
  <view class="item" @click="clickItem">
    <view class="left">
      <view class="left_img">
        <image :src="item.teacherIcoUrl || item.coverUrl" />
      </view>
    </view>
    <view class="right">
      <view class="course_name">{{ item.name || "课程名称" }}</view>
      <view class="time_warp">
        <view class="time">{{ item.createTime }} ·</view>
        <view class="watch">
          <text>{{ item.playCount }}</text>
          人观看
        </view>
      </view>
      <view class="label_warp">
        <view class="teacher_name">{{ item.teacherName || "" }}</view>
        <view class="price" v-if="item.liveType !== 1"
          >{{ item.gold }}积分</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "course-card",
  props: {
    item: {
      type: Object,
      value: {},
    },
  },
  data() {
    return {};
  },
  methods: {
    clickItem() {
      this.$u.route("/pages/course-detail/course-detail", {
        id: this.item.id,
      });
    },
  },
};
</script>

<style lang="scss">
.item {
  margin-bottom: 20upx;
  width: 690upx;
  height: 220upx;
  background: #ffffff;
  box-shadow: 0px 4upx 6upx #f0f2f5;
  border-radius: 10upx;
  padding: 40upx 32upx;
  display: flex;
  justify-content: space-between;
  position: relative;

  .left {
    width: 120upx;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-direction: column;

    .left_img {
      width: 120upx;
      height: 140upx;
    }
  }

  .right {
    flex: 1;
    margin-left: 28upx;

    .right_type {
      width: 80upx;
      height: 30upx;
      font-size: 20upx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: -6upx;
      top: 20upx;
    }

    .type_color1 {
      background: #13c2c2;
    }

    .type_color2 {
      background: #ff7a45;
    }

    .type_color3 {
      background: #9254de;
    }

    .course_name {
      width: 490upx;
      height: 42upx;
      font-size: 30upx;
      font-weight: bold;
      line-height: 42upx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .time_warp {
      display: flex;
      align-items: center;
      margin-top: 6upx;
      height: 32upx;

      .time {
        font-size: 22upx;
        color: #666666;
      }

      .watch {
        font-size: 22upx;
        color: #666666;

        text {
          margin-left: 10upx;
          color: #0058a3;
          font-size: 22upx;
        }
      }
    }

    .label_warp {
      margin-top: 10upx;
      display: flex;
      // align-items: center;
      // flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;

      .teacher_name {
        max-width: 240upx;
        margin-top: 14upx;
        height: 34upx;
        font-size: 24upx;
        font-weight: 500;
        line-height: 34upx;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        height: 50upx;
        font-size: 36upx;
        font-weight: 800;
        line-height: 50upx;
        color: #ff3b30;
      }
    }
  }
}
</style>
